<template>
  <section id="recordCount">
    <el-row style="line-height: 30px;padding-bottom: 10px;">
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap '>投注时间：</span>
        <div class="block" style="flex: 1">
          <el-date-picker @change="changeDate1"
            v-model="form.beginTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="5" class='flex'>
        <span style='white-space:nowrap;padding: 0 8px'>至</span>
        <div class="block" style="flex: 1">
          <el-date-picker  @change="changeDate2"
            v-model="form.endTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-col>
      <!--<el-col :span="5" class='flex'>-->
        <!--<span style='white-space:nowrap;padding: 0 3px'>彩种名称：</span>-->
        <!--<el-select v-model="value" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-col>-->
      <!--<el-col :span="5" class='flex'>-->
        <!--<span style='white-space:nowrap;padding: 0 3px'>彩种状态：</span>-->
        <!--<el-select v-model="value" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in options"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value">-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-col>-->
      <el-col :span="4" style="text-align: left;padding-left: 10px">
        <el-button type="primary" size="mini" @click="getTableData">查询</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData.list" v-loading="loading" stripe style="width: 100%">

      <el-table-column prop="userName" label="姓名">
      </el-table-column>
      <el-table-column prop="gameName" label="彩种名称">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="lotteryNo" label="投注号码">
      </el-table-column>
      <el-table-column prop="multiple" label="倍数" width="80">
      </el-table-column>
      <el-table-column prop="amount" label="金额">
      </el-table-column>
      <el-table-column prop="lottery" label="期数">
      </el-table-column>
      <el-table-column prop="createTime" label="投注时间" width="160">
      </el-table-column>
      <el-table-column  label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">成功</div>
          <div v-if="scope.row.status == 1">失败</div>
          <div v-if="scope.row.status == 2">等待</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right;padding-right: 20px">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="tableData.pageNumber"
        :page-size="tableData.pageSize"
        layout="total, prev, pager, next"
        :total="tableData.totalRow">
      </el-pagination>
    </div>
  </section>
</template>

<script>
  import judgeTime from '../../../../assets/js/index.js'

  export default {
    data () {
      return {
        value1: '',
        options: [],
        value: '',
        tableData: {},
        total: 1,
        loading: false,
        form: {
          userId: undefined,
          pageSize: 10,
          pageNumber: 1,
          beginTime: undefined,
          endTime: undefined,
          ticketId: undefined,
          lotteryId: undefined
        }
      }
    },
    beforeMount () {
      this.form.userId = sessionStorage.getItem('userId')
      this.getTableData()
    },
    methods: {
      getTableData () {
        this.loading = true
        this.$api.getBetList(this.form).then(res => {
          this.tableData = res.data
          this.loading = false
          for (let i = 0; i < this.tableData.list.length; i++) {
            this.tableData.list[i].createTime = judgeTime(this.tableData.list[i].createTime)
          }
        })
      },
      changeDate1 (val) {
        val ? this.form.beginTime = Date.parse(val) : this.form.beginTime = undefined
      },
      changeDate2 (val) {
        val ? this.form.endTime = Date.parse(val) : this.form.endTime = undefined
      },
      handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getTableData()
      }
    }

  }
</script>

<style lang="less">
  #recordCount {

    .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 100%;
      padding-right: 0;
      font-size: 12px;
      padding-left: 20px;
    }
    .el-input {
      width: 100% !important;
    }
    .el-input__icon {
      line-height: inherit;
      width: 0;
    }
    .el-input__suffix {
      right: 20px;
    }
  }
</style>
